import React,{ Fragment,useEffect,useState } from "react";
import { useNavigate, useLocation, useParams } from 'react-router-dom';
import './index.less'

import TopBar from '../../../components/TopBar/TopBar'
import FloorBar from '../../../components/FloorBar/FloorBar'
import UserInfo from '../../../components/UserInfo/UserInfo'
import CommentContent from '../../../components/CommentContent/CommentContent'

import utils from '../../../util/utils'
import http from '../../../util/http'

function LessonDetail() {
  const navigate = useNavigate ();
  const location = useLocation();
  const params= useParams();
  console.log(location,params)

  const [lesson,setLesson] = useState({
    Id:'1',
    Title:"Web前端开发JavaScript高薪课堂啊啊Web前端b前端开发JavaScript高薪课堂",
    UserId:"1",
    User:{
      Id: "1",
      Nickname: "范征远",
      AvatarUrl: "https://img2.baidu.com/it/u=2015865969,3401990894&fm=253&app=138&size=w931&n=0&f=JPEG&fmt=auto?sec=1666630800&t=0e56d590792d305dab1d410186dab3aa",
      PhoneNumber: "13142211138",
      Email: "1954418428@qq.com",
      Sex: 1,
      Birthday: '2000-11-10',
      Description: `怀化学院本科毕业，23届应届生，专业成绩优，参加各种比赛。
          喜欢挑战，酷爱难的东西。热爱前端技术，对各种前端后端、算法等知识技术都比较熟悉。
          后续会在本网站上依次推出这些课程。`
    },
    ImgUrl:"https://10.idqqimg.com/qqcourse_logo_ng/ajNVdqHZLLAf1icyicZicuHUIBe2zic6UiaCwA4ekE7QJdGicagv0WIHBOt6cvuAI2LibupjCZKrdns5fI/356",
    ChapterCount:10,
    ClassHourCount:80,
    Description:"描述描述描述描述描述描述描述描述描述描述描述描述",
    IsEnd:true,
    Count:{
      LikeCount:520,
      CollectCount:1000,
      VisitCount:12321,
      CommentCount:68,
      ResourceId:'1',
      ResourceType:2
    },
    CategoryList:[
      {
        Id:"1",
        CategoryName:"类别1"
      },
      {
        Id:"2",
        CategoryName:"类别2"
      },
      {
        Id:"3",
        CategoryName:"类别3"
      }
    ],
  })

  const [chapterList,setChapterList]= useState([
    {
      Id:"1",
      LessonId:"1",
      Sort:1,
      Title:"章节章节章节章节章节章节章节章节章节章节章节章节章节章节章节",
      isShowClasshour:true,
      ClasshourList:[
        {
          Id:'1',
          ChapterId:'1',
          Sort:1,
          Title:"课时课时课时课时课时",
          Time:60,
          Status:1,
          CreateTime:"2022-1-1",
          ModifyTime:"2022-1-1",
        },
        {
          Id:'2',
          ChapterId:'1',
          Sort:2,
          Title:"课时课时课时课时课时",
          Time:60,
          Status:1,
          CreateTime:"2022-1-1",
          ModifyTime:"2022-1-1",
        }
      ]
    },
    {
      Id:"2",
      LessonId:"1",
      Sort:2,
      Title:"章节章节章节章节章节章节章节章节章节章节章节章节章节章节章节",
      isShowClasshour:true,
      ClasshourList:[
        {
          Id:'3',
          ChapterId:'2',
          Sort:1,
          Title:"课时课时课时课时课时",
          Time:60,
          Status:1,
          CreateTime:"2022-1-1",
          ModifyTime:"2022-1-1",
        },
        {
          Id:'4',
          ChapterId:'2',
          Sort:2,
          Title:"课时课时课时课时课时",
          Time:60,
          Status:1,
          CreateTime:"2022-1-1",
          ModifyTime:"2022-1-1",
        }
      ]
    },
    {
      Id:"2",
      LessonId:"1",
      Sort:2,
      Title:"章节章节章节章节章节章节章节章节章节章节章节章节章节章节章节",
      isShowClasshour:true,
      ClasshourList:[
        {
          Id:'3',
          ChapterId:'2',
          Sort:1,
          Title:"课时课时课时课时课时",
          Time:60,
          Status:1,
          CreateTime:"2022-1-1",
          ModifyTime:"2022-1-1",
        },
        {
          Id:'4',
          ChapterId:'2',
          Sort:2,
          Title:"课时课时课时课时课时",
          Time:60,
          Status:1,
          CreateTime:"2022-1-1",
          ModifyTime:"2022-1-1",
        }
      ]
    }, {
      Id:"2",
      LessonId:"1",
      Sort:2,
      Title:"章节章节章节章节章节章节章节章节章节章节章节章节章节章节章节",
      isShowClasshour:true,
      ClasshourList:[
        {
          Id:'3',
          ChapterId:'2',
          Sort:1,
          Title:"课时课时课时课时课时",
          Time:60,
          Status:1,
          CreateTime:"2022-1-1",
          ModifyTime:"2022-1-1",
        },
        {
          Id:'4',
          ChapterId:'2',
          Sort:2,
          Title:"课时课时课时课时课时",
          Time:60,
          Status:1,
          CreateTime:"2022-1-1",
          ModifyTime:"2022-1-1",
        }
      ]
    }, {
      Id:"2",
      LessonId:"1",
      Sort:2,
      Title:"章节章节章节章节章节章节章节章节章节章节章节章节章节章节章节",
      isShowClasshour:true,
      ClasshourList:[
        {
          Id:'3',
          ChapterId:'2',
          Sort:1,
          Title:"课时课时课时课时课时",
          Time:60,
          Status:1,
          CreateTime:"2022-1-1",
          ModifyTime:"2022-1-1",
        },
        {
          Id:'4',
          ChapterId:'2',
          Sort:2,
          Title:"课时课时课时课时课时",
          Time:60,
          Status:1,
          CreateTime:"2022-1-1",
          ModifyTime:"2022-1-1",
        }
      ]
    }
  ])

  const [commentList,setCommentList] = useState([
    {
      Id:'1',
      ParentId:0,
      UserId:"1",
      User:{
        Id: "1",
        Nickname: "范征远",
        AvatarUrl: "https://img2.baidu.com/it/u=2015865969,3401990894&fm=253&app=138&size=w931&n=0&f=JPEG&fmt=auto?sec=1666630800&t=0e56d590792d305dab1d410186dab3aa",
      },
      Content:"评论评论评论评论评论评论评论评论评论评论评论评论评论评论评论评论评论评论评论评论评论评论评论评论评论评论评论评论评论评论评论评论评论评论评论评论评论评论评论评论评论评论评论评论评论评论评论评论",
      ResourceId:"1",
      ResourceType:1,
      CreateTime:"2020-10-26 14:21",
    },
    {
      Id:'2',
      ParentId:0,
      UserId:"1",
      User:{
        Id: "1",
        Nickname: "范征远",
        AvatarUrl: "https://img2.baidu.com/it/u=2015865969,3401990894&fm=253&app=138&size=w931&n=0&f=JPEG&fmt=auto?sec=1666630800&t=0e56d590792d305dab1d410186dab3aa",
      },
      Content:"评论评论评论评论评论评论评论评论评论评论评论评论评论评论评论评论评论评论评论评论评论评论评论评论评论评论评论评论评论评论评论评论评论评论评论评论评论评论评论评论评论评论评论评论评论评论评论评论",
      ResourceId:"1",
      ResourceType:1,
      CreateTime:"2020-10-26 14:21",
    },
    {
      Id:'3',
      ParentId:0,
      UserId:"1",
      User:{
        Id: "1",
        Nickname: "范征远",
        AvatarUrl: "https://img2.baidu.com/it/u=2015865969,3401990894&fm=253&app=138&size=w931&n=0&f=JPEG&fmt=auto?sec=1666630800&t=0e56d590792d305dab1d410186dab3aa",
      },
      Content:"评论评论评论评论评论评论评论评论评论评论评论评论评论评论评论评论评论评论评论评论评论评论评论评论评论评论评论评论评论评论评论评论评论评论评论评论评论评论评论评论评论评论评论评论评论评论评论评论",
      ResourceId:"1",
      ResourceType:1,
      CreateTime:"2020-10-26 14:21",
    }
  ])

  const [activeTabIndex,setActiveTabIndex] = useState(3);
  const changeTab = (v)=>{
    setActiveTabIndex((preValue)=>{
      return v
    })
  }

  const showClasshour = (item,index)=>{
    setChapterList(preValue =>{
      let newValue = [...preValue];
      newValue[index].isShowClasshour = !newValue[index].isShowClasshour;
      return newValue;
    })
  }

  const goClasshour = (e,ClasshourId)=>{
    if(!ClasshourId){
      ClasshourId =chapterList[0].ClasshourList[0].Id
    }
    navigate(`/Classhour/${ClasshourId}`)
  }

  const goLessonList = (e,item)=>{
    e.stopPropagation()
    navigate(`/LessonList?activeOrderId=${0}&activeCategoryId=${item.Id}`)
  }

  useEffect(()=>{
    console.log("执行");
  },[])

  return (
    <Fragment >
      <TopBar activeIndex={1} ></TopBar>
      
      <div className="lesson-detail root-cont">
        <div className="lesson-detail-wrap">
          <div className="lesson-detail-cont">
            <div className="img-box">
              <img src={lesson.ImgUrl} alt="" />
            </div>
            <div className="cont-box">
              <h3 className="lesson-title">
                {lesson.Title}
              </h3>
              <div className="lesson-author">
                <img src={lesson.User.AvatarUrl} alt="" />
                <span>
                  {lesson.User.Nickname}
                </span>
              </div>
              <ul className="category-list">
                {
                  lesson.CategoryList.map((item,index)=>(
                    <li className="category-item" key={index} onClick={(e)=>goLessonList(e,item)}>
                      {item.CategoryName}
                    </li>
                  ))
                }
              </ul>
              <ul className="count">
                <li>
                  <span>{lesson.ClassHourCount}</span>节课程
                </li>
                <li>
                <span>{lesson.Count.VisitCount}</span>人学习
                </li>
              </ul>
            </div>
          </div>
        </div>
        <div className="flex justify-content-center">
          <div style={{flexBasis: "1160px"}}>
            <div className="apply-bar">
                <div className="lesson-price">
                  免费
                </div>
                <div className="lesson-tip">
                  来吧,让名师教你,你只需要听就可以了。
                </div>
                <div className="go-btn" onClick={(e)=>goClasshour(e)}>
                  开始学习
                </div>
            </div>

            <div className="section-main">
                <div className="tabs">
                  <div className={ activeTabIndex == 1 ?"tab-item active-tab":"tab-item"}
                  onClick={changeTab.bind(this,1)}>
                    课程介绍
                  </div>
                  <div className={ activeTabIndex == 2 ?"tab-item active-tab":"tab-item"}
                  onClick={changeTab.bind(this,2)}>
                    课程目录
                  </div>
                  <div className={ activeTabIndex == 3 ?"tab-item active-tab":"tab-item"}
                  onClick={changeTab.bind(this,3)}>
                    课程评价({lesson.Count.CommentCount})
                  </div>
                </div>

                {
                 activeTabIndex == 1 &&(
                  <div>
                    <div className="lesson-description">
                      {lesson.Description}
                    </div>

                    <div>
                      <div style={{paddingBottom:'20px'}}>
                        <UserInfo user={lesson.User} title="讲师介绍"></UserInfo>
                      </div>
                    </div>
                  </div>
                )
                }

                {
                 activeTabIndex == 2 &&(
                  <div className="chapter-list">
                    {
                      chapterList && chapterList.map((item,index)=>(
                        <Fragment  key={index}>
                          <div className={ item.isShowClasshour ?"showClasshour":""}>
                            <div className="chapter-item" onClick={showClasshour.bind(this,item,index)}>
                              <div className="chapter-index">
                              {(((index+1)+'').length ==1 ? 0 :'')}{index+1}.
                              </div>
                              <span className="chapter-title">
                                {item.Title}
                              </span>
                              {!item.isShowClasshour && <i className="iconfont icon-xiangshangjiantou"></i>}
                              {item.isShowClasshour && <i className="iconfont icon-xiangxiajiantou"></i>}
                            </div>
                            <div className="classhour-list">
                              {item.ClasshourList && item.ClasshourList.map((item,index)=>(
                                <div className="classhour-item" key={index} onClick={(e)=>goClasshour(e,item.Id)}>
                                  <div className="classhour-index">
                                    {(((index+1)+'').length ==1 ? 0 :'')}{index+1}.
                                  </div>
                                  <span className="classhour-title">
                                    {item.Title}
                                  </span>
                                  <span className="classhour-time">
                                    {item.Time}
                                  </span>
                                </div>
                              ))
                              }
                            </div>
                          </div>
                        </Fragment>
                      ))
                    }
                  </div>
                )
                } 

                {
                  activeTabIndex == 3 &&(
                    <div className="comment-list">
                      {
                        commentList && commentList.map((item,index)=>(
                          <dir className="comment-item" key={index}>
                            <CommentContent Comment={item}></CommentContent>
                          </dir>
                        ))
                      }
                    </div>
                  )
                }

            </div>
          </div>
        
        </div>
    
      </div>

      <FloorBar></FloorBar>        
    </Fragment>
    
  )
}

export default LessonDetail;